<template>
  <div>
    <h2>Home组件内容</h2>
    <div>
      <ul class="nav nav-tabs">
        <li>
          <router-link
            class="list-group-item"
            to="/home/news"
            active-class="active"
            >News</router-link
          >
        </li>
        <li>
          <!-- 浏览器的历史记录有两种写入方式，分别为push和replace
            push是追加历史记录，replace是替换当前记录，路由跳转默认是push 
            可理解为哪个组件加了，进入后会无法回退来时候的路径（替换了） -->
          <router-link
            replace
            class="list-group-item"
            to="/home/details"
            active-class="active"
            >Message</router-link
          >
        </li>
      </ul>
      <!-- 跳转路由时不销毁组件， 注意要加在展示的外部区域-->
      <!-- 通过include指定存活组件（尽量加，避免全部保留），注意是指定组件名！ -->
      <!-- 如果指定多个是创建一个数组  :include="['News','Details']" -->
      <keep-alive include="News">
        <router-view></router-view>
      </keep-alive>
    </div>
  </div>
</template>

<script>
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Home",
  mounted() {
    //console.log("Home组件挂载完毕了", this);
  },
  beforeDestroy() {
    //console.log("Home组件即将被销毁了");
  },
};
</script>

